<template>
    <el-table :data="roleData" style="width: 100%;margin-top: 20px;" :height="675">
      <el-table-column type="selection" width="55" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="编号" prop="id" width="70" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="标题" prop="title" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="内容" >
        <template #default="props">
          <el-text  truncated class="w-150px mb-2"  v-html="props.row.content">        
  </el-text>
        </template>
      </el-table-column>

      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="时间" prop="publishTime" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="操作">
        <template #default="props">
          <el-button type="text" size="small" @click="Edit(props.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteid(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>

  <script setup>
  import { defineProps, reactive, watch } from 'vue';
import { ref } from 'vue';
const props=defineProps(['Publicity'])
const emit=defineEmits(['delete','edit'])
// 定义数据对象
let roleData = ref([])
watch(()=>props.Publicity,(newPublicity)=>{
    roleData.value=newPublicity
},{immediate:true})
// 触发删除
function deleteid(id){
emit('delete',id)
}
// 出发编辑
function Edit(row){
    emit('edit',row)
}
</script>
  
  <style scoped>
  :deep(.lableclass) {
    color: black;
    font-weight: 500;
    background-color: #f8f8f9;
  }
  
  :deep(.el-form-item__label) {
    font-weight: bold;
  }
  :deep(.w-150px .mb-2){
    width: 10px;
 
  }
  </style>
